@charset "UTF-8";
/* CSS Document */

.hero {
	width: 100%;
	height: 130vw;
	background: #B1DEFF;
	margin-top: -10px;
	display: block;
	position: relative;
	z-index: 10;
}
.herotitle {
	text-align: center;
	font-family: 'poppins';
	font-size: 6vw;
	padding-top: 20vw;
	font-weight: 500;
}

.heropara {
	text-align: center;
	font-family: 'poppins';
	font-size: 3vw;
	font-weight: lighter;
	width: 70vw;
	margin: 5vw 0 0 15vw;
}

.herobutton {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6vw;
	border: none; 
	background: #22865C;
	width: 30vw;
	height: 6vw;
	border-radius: 16px;
	transition: 0.2s ease;
}

.herobutton:hover {
	background: #2EB27B;
}

.herobutton a {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #f2f2f2;
	font-size: 2.4vw;
	font-weight: 400;
}

.images {
	display: flex;
	flex-direction: row;
	height: 60vw;
	margin-left: 0px;
}

.Lakes-desktop {
	width: 64vw;
	height: 35.8912vw;
	display: block;
	margin-left: 10.38vw;
	margin-top: 10vw;
}

.Lakes-mobile {
	height: 40vw; 
	width: 18.24vw; 
	display: block; 
	position: absolute; 
	margin-left: 71.38vw; 
	margin-top: 18vw 
}

.tailoredwebsite {
	height: 120vw;
	background: radial-gradient(circle, #6EC1FF, #32A4FC);
	border-radius: 15px;
	margin-top: -20px;
	z-index: 11;
	position: relative;
}

.tailoredwebsitetitle {
	text-align: center;
	font-size: 6vw;
	font-family: 'poppins';
	padding-top: 10vw;
	color: #f2f2f2;
	font-weight: 500;
}

.tailoredwebsitepara {
	text-align: center;
	font-size: 4vw;
	font-weight: lighter;
	color: #f2f2f2;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	width: 70vw;
	margin: 8vw 0vw 0vw 15vw;
}

.tailoredwebsiteimg {
	background: #f2f2f2;
	width: 80vw;
	height: 50vw;
	margin: 10vw 0 0 10vw;
	border-radius: 20px;
}

.tailoredwebsiteimg img {
	width: 100%;
	border-radius: 20px;

}

.redesign {
	height: 50vw;
}

.redesigntitle {
	text-align: center;
  	font-family: 'PF Marlet Display', serif;
	font-size: 6vw;
	margin-top: 10vw;
}

.redesignpara {
	text-align: center;
  	font-family: 'Poppins', sans-serif;
	font-size: 3vw;
	margin-top: 5vw;
	margin-left: auto; 
	margin-right: auto;
	font-weight: lighter;
	width: 80vw;
}
.redesignbutton {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6vw;
	border: none;
	background: #000000;
	width: 30vw;
	height: 6vw;
	border-radius: 3vw;
}

.redesignbutton a {
	color: #f2f2f2;
	font-size: 2.4vw;
}

.landingpage {
	height: 80vw;
}

.landingpage-background {
	background: radial-gradient(circle, #FFD49A, #F5AF50);
	height: 75vw;
	width: 90vw;
	margin-left: 5vw;
	border-radius: 15px;
}

.landingpage-title {
	text-align: center;
	font-family: 'poppins';
	font-size: 6vw;
	padding-top: 5vw;
	font-weight: 500;
}

.landingpage-line {
	width: 60vw;
	height: 0.5vw;
	background: #000000;
	margin-left: 15vw;
	margin-top: -1vw;
}

.landingpage-para {
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 4vw;
	margin-top: 6vw;
	margin-left: auto; 
	margin-right: auto;
	font-weight: lighter;
	width: 70vw;
}

.landingpage-button {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10vw;
	border: none;
	background: #000000;
	color: #f2f2f2;
	width: 30vw;
	height: 6vw;
	font-size: 3vw;
	border-radius: 20px;
}

.landingpage-button a {
	color: #f2f2f2;
	font-size: 3vw;
}

@media (min-width: 769px) {
	.hero {display: flex; flex-direction: row; height: 55vw;} 
	
	.herotitle {text-align: left; width: 50vw; margin-left: 4vw; height: 20vw; display: block; margin-top: -8vw; font-size: 4vw;} 
	
	.heropara {text-align: left; width: 45vw; margin-top: 8vw; margin-left: 4vw; font-size: 2.5vw;} 
	
	.herobutton {margin-left: 4vw; width: 25vw; height: 3vw;} 
	
	.herobutton p {font-size: 1.3vw;}
	
	.images {margin-left: 0px;} 
	
	.Lakes-desktop {width: 32vw; height: 17.9456vw; margin-left: 0px; margin-top: 15vw;} 
	
	.Lakes-mobile {height: 20vw; width: 9.12vw; margin-left: 31vw; margin-top: 22vw;} 
	
	.tailoredwebsite {height: 114vw; border-radius: 2vw; font-size: 4vw;}
	
	.tailoredwebsitepara {margin-top: 3vw; font-size: 2.5vw;}
		
	.redesign {width: 100%; display: block; height: 40vw;}
	
	.redesigntitle {font-size: 5vw;}
	
	.redesignpara {width:70%; display: block; margin-left: auto; margin-right: auto; font-size: 2.5vw;} 
	
	.redesignbutton {width: 24vw; height: 3vw; font-size: 1.5vw;}
	
	.landingpage {width: 100%; display: block; margin-top: 10vw; height: 63vw;} 
	
	.landingpage-title {font-size: 4vw;}
	
	.landingpage-background {width: 80vw; margin-left: auto; margin-right: auto; height: 50vw;} 
	
	.landingpage-line {width: 30vw; margin-left: auto; margin-right: auto; margin-top: -1vw;} 
	
	.landingpage-para {width: 60vw; font-size: 2.5vw;} 
	
	.landingpage-button {margin-top: 8vw; height: 3vw; width: 18vw; font-size: 1.5vw;}
	
	.landingpage-button {font-size: 1.8vw;}
}